<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>约战球队</title>
    <!--移动端meta设置 开始-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/all.css">
</head>
<body class="mhome">
<section class="xh-index-war">
    <a href="#" class="index-war-pic">
        <img src="image/public-banner1.png" alt=""/>
    </a>
</section>
<section class="xh-toggle-select clearfix bg-fff">
    <div class="flexbox toggle-select-item">
        <a href="javascript:;" class="flexbox-1 select-info">顺德区</a>
        <a href="javascript:;" class="flexbox-1 select-info">甲午战队</a>
    </div>
    <div class="select-address-wrap clearfix">
        <ul class="address-select">
            <li><a href="javascript:;">全部区域</a></li>
            <li><a href="javascript:;">顺德区</a></li>
            <li><a href="javascript:;">南海区</a></li>
            <li><a href="javascript:;">三水区</a></li>
            <li><a href="javascript:;">高明区</a></li>
        </ul>
        <ul class="address-select">
            <li><a href="javascript:;">甲午战队</a></li>
            <li><a href="javascript:;">甲午战队</a></li>
            <li><a href="javascript:;">甲午战队</a></li>
            <li><a href="javascript:;">甲午战队</a></li>
            <li><a href="javascript:;">甲午战队</a></li>
        </ul>
    </div>
</section>
<!--图文列表 S-->
<section class="xh-public-graphic bg-fff">
    <ul class="img-panel clearfix">
        <li class="img-list-item border-green p10">
            <a href="#" class="img-list-info">
                <div class="img-show clearfix">
                    <img src="image/teams-pic.png" alt="" class="fl"/>
                </div>
                <div class="img-list-desc color-green">
                    <p class="img-desc-1 mt10">球队名称：恒大队</p>
                    <p class="img-desc-2 mt10">球队人数：20</p>
                    <p class="img-desc-3 mt10">球队地区：广州</p>
                </div>
            </a>
        </li>
        <li class="img-list-item border-green p10">
            <a href="#" class="img-list-info">
                <div class="img-show clearfix">
                    <img src="image/teams-pic.png" alt="" class="fl"/>
                </div>
                <div class="img-list-desc color-green">
                    <p class="img-desc-1 mt10">球队名称：恒大队</p>
                    <p class="img-desc-2 mt10">球队人数：20</p>
                    <p class="img-desc-3 mt10">球队地区：广州</p>
                </div>
            </a>
        </li>
        <li class="img-list-item border-green p10">
            <a href="#" class="img-list-info">
                <div class="img-show clearfix">
                    <img src="image/teams-pic.png" alt="" class="fl"/>
                </div>
                <div class="img-list-desc color-green">
                    <p class="img-desc-1 mt10">球队名称：恒大队</p>
                    <p class="img-desc-2 mt10">球队人数：20</p>
                    <p class="img-desc-3 mt10">球队地区：广州</p>
                </div>
            </a>
        </li>
        <li class="img-list-item border-green p10">
            <a href="#" class="img-list-info">
                <div class="img-show clearfix">
                    <img src="image/teams-pic.png" alt="" class="fl"/>
                </div>
                <div class="img-list-desc color-green">
                    <p class="img-desc-1 mt10">球队名称：恒大队</p>
                    <p class="img-desc-2 mt10">球队人数：20</p>
                    <p class="img-desc-3 mt10">球队地区：广州</p>
                </div>
            </a>
        </li>
        <li class="img-list-item border-green p10">
            <a href="#" class="img-list-info">
                <div class="img-show clearfix">
                    <img src="image/teams-pic.png" alt="" class="fl"/>
                </div>
                <div class="img-list-desc color-green">
                    <p class="img-desc-1 mt10">球队名称：恒大队</p>
                    <p class="img-desc-2 mt10">球队人数：20</p>
                    <p class="img-desc-3 mt10">球队地区：广州</p>
                </div>
            </a>
        </li>

    </ul>
</section>

<!--图文列表 E-->
<!-- 底部导航 S-->
<div class="nav-tabs">
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-home.png" width="100%">
                </i>
                <span class="fzrem">首页</span>
            </p>
        </a>
    </div>
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-clueb.png" width="100%">
                </i>
                <span class="fzrem">球队</span>
            </p>
        </a>
    </div>
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-list.png" width="100%">
                </i>
                <span class="fzrem">订单</span>
            </p>
        </a>
    </div>
    <div class="nav-items">
        <a href="javascript:void(0)">
            <p class="pt10 pb10">
                <i class="icon-panel">
                    <img src="image/nav-my.png" width="100%">
                </i>
                <span class="fzrem">我的</span>
            </p>
        </a>
    </div>
</div>
<!--底部导航 E-->
<!-- 悬浮菜单 S-->
<div class="selectItem">
    <div class="choose_but pa">
        <span class="close-select pa">×</span>
    </div>
    <ul>
        <li>
            <a class="fzrem" href="##">宝贝</a>
        </li>
        <li>
            <a class="fzrem" href="##">裁判</a>
        </li>
        <li>
            <a class="fzrem" href="##">球员</a>
        </li>
        <li>
            <a class="fzrem" href="##">球队</a>
        </li>
        <li>
            <a class="fzrem" href="##">球场</a>
        </li>
    </ul>
</div>
<!-- 悬浮菜单 E-->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/selectItem.js"></script>
<script>
    $(function () {
        $(".toggle-select-item .select-info").on("touchstart", function () {
            var index = $(this).index();
            var _this = $(this);
            var selectBox = $(".select-address-wrap .address-select");
            var ele = selectBox.eq(index);
            if (!ele.hasClass("select-active")) {
                ele.siblings().removeClass("select-active").hide();
                ele.addClass("select-active").slideToggle();
            } else {
                ele.removeClass("select-active").slideToggle();
            }
            ele.find("li").on("touchstart", function () {
                var html = $(this).text();
                _this.html(html);
                ele.slideUp();
            });
        })
        $(".selectItem").selectItem({
            intervals:-12,
            isSwiper:true,
            animate:100,
            isOpen:true,
        });
    })
</script>
</body>
</html>